<template>
 <div class="wrapper">
 <!-- header部分 -->
 <header>
 <p>地址管理</p>
 </header>
 <!-- 地址列表部分 -->
 <ul class="addresslist">
 <li v-for="item in deliveryAddressArr" :key="item.daId || item.id">
 <div class="addresslist-left" @click="setDeliveryAddress(item)">
 <h3>{{item.contactName}}{{sexLabel(item.gender)}} {{item.phone}}
 </h3>
 <p>{{item.detail}}</p>
 </div>
 <div class="addresslist-right">
 <i class="fa fa-edit" @click="editUserAddress(item.id)"></i>
 <i class="fa fa-remove" @click="removeUserAddress(item.id)"></i>
 </div>
 </li>
 </ul>
 <!-- 新增地址部分 -->
 <div class="addbtn" @click="toAddUserAddress">
 <i class="fa fa-plus-circle"></i>
 <p>新增收货地址</p>
 </div>
 <!-- 底部菜单部分 -->
 <Footer></Footer>
 </div>
 </template>
 <script>
 import Footer from '../components/Footer.vue';
 import { listDeliveryAddressByUserId as apiListAddress, removeAddress } from '../api/address'
 export default{
name:'UserAddress',
 data(){
 return {
 businessId:this.$route.query.businessId,
 user:{},
 deliveryAddressArr:[]
 }
 },
 created() {
 this.user = this.$getSessionStorage('user');
 this.listDeliveryAddressByUserId();
 },
  activated(){
    // 进入/返回该页时，使用当前登录用户重新查询地址
    this.user = this.$getSessionStorage('user');
    this.listDeliveryAddressByUserId();
  },
 components:{
 Footer
 },
 
 methods:{
 sexLabel(value){
 return value==1?'先生':'女士';
 },
 listDeliveryAddressByUserId(){
 // 查询送货地址（使用抽离的 API）
 apiListAddress(this.user.id)
 .then(response=>{
    
 this.deliveryAddressArr = response.data.data;
 }).catch(error=>{
 console.error(error);
 });
 },
 setDeliveryAddress(deliveryAddress){
 //把用户选择的默认送货地址存储到localStorage中（规范化字段，兼容旧字段）
 const normalized = {
   // 统一包含两种ID字段
   id: deliveryAddress.id || deliveryAddress.daId,
   daId: deliveryAddress.daId || deliveryAddress.id,
   // 显示字段
   contactName: deliveryAddress.contactName,
   gender: deliveryAddress.gender ?? deliveryAddress.contactSex,
   phone: deliveryAddress.phone ?? deliveryAddress.contactTel,
   // 同时保留 detail 与 address，确保订单页可读
   detail: deliveryAddress.detail ?? deliveryAddress.address,
   address: deliveryAddress.address ?? deliveryAddress.detail,
 }
 this.$setLocalStorage(this.user.userId, normalized);
 this.$router.push({path:'/orders',query:{businessId:this.businessId}});
 },
 toAddUserAddress(){
 this.$router.push({path:'/addUserAddress',query:{businessId:this.businessId}});
 },
 editUserAddress(daId){
 this.$router.push({path:'/editUserAddress',query:
 {businessId:this.businessId,daId:daId}});
 },
 removeUserAddress(daId){
 if(!confirm('确认要删除此送货地址吗？')){
 return;
 }
  // 使用抽离的删除方法（REST 风格）
  removeAddress(daId).then(response=>{
    console.log("123213:",response);
  if(response.data.code == 200 || response.status === 200){
     alert('删除地址成功！');

 let deliveryAddress = this.$getLocalStorage(this.user.userId);
 if(deliveryAddress!=null&&deliveryAddress.daId==daId){
 this.$removeLocalStorage(this.user.userId);
 }
 this.listDeliveryAddressByUserId();
 }else{
 alert('删除地址失败！');
 }
 }).catch(error=>{
 console.error(error);
 });
 }
 }
 }
 </script>
 <style scoped>
 /*************** 总容器 ***************/
 .wrapper {
 width: 100%;
 height: 100%;
 background-color: #F5F5F5;
 }
 /*************** header ***************/
 .wrapper header {
 width: 100%;
 height: 12vw;
 background-color: #0097FF;
 display: flex;
 justify-content: space-around;
 align-items: center;
 color: #fff;
 font-size: 4.8vw;
 position: fixed;
 left: 0;
 top: 0;
 /*保证在最上层*/
 z-index: 1000;
 }
 /*************** addresslist ***************/
 .wrapper .addresslist {
 width: 100%;
 margin-top: 12vw;
 background-color: #fff;
 }
 .wrapper .addresslist li {
 width: 100%;
 box-sizing: border-box;
border-bottom: solid 1px #DDD;
 padding: 3vw;
 display: flex;
 }
 .wrapper .addresslist li .addresslist-left {
 flex: 5;
 /*左边这块区域是可以点击的*/
 user-select: none;
 cursor: pointer;
 }
 .wrapper .addresslist li .addresslist-left h3 {
 font-size: 4.6vw;
 font-weight: 300;
 color: #666;
 }
 .wrapper .addresslist li .addresslist-left p {
 font-size: 4vw;
 color: #666;
 }
 .wrapper .addresslist li .addresslist-right {
 flex: 1;
 font-size: 5.6vw;
 color: #999;
 cursor: pointer;
 display: flex;
 justify-content: space-around;
 align-items: center;
 }
 /*************** 新增地址部分 ***************/
 .wrapper .addbtn {
 width: 100%;
 height: 14vw;
 border-top: solid 1px #DDD;
 border-bottom: solid 1px #DDD;
 background-color: #fff;
 margin-top: 4vw;
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 4.5vw;
 color: #0097FF;
 user-select: none;
 cursor: pointer;
 }
.wrapper .addbtn p {
 margin-left: 2vw;
 }
 </style>